<template>
  <div>
    <ul class="card-box">
      <li v-for="(item,index) in noteCommentListCopy" :key="index" @click="goNote(item.noteId)">
        <div class="card-img" :style="{ 'backgroundImage': 'url(/api/upload/'+item.noteImg1+')'}"></div>
        <div class="card-foot">
          <div class="card-foot-left">
            <span
              class="head-pic"
              :style="{ 'backgroundImage': 'url(/api/upload/'+item.userImg+')'}"
              @click="goOther(item.userId)"
            ></span>
          </div>
          <span class>{{item.discussTime|timerFilter('-')}}</span>
        </div>
      </li>
    </ul>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="8"
        :total="totalNum"
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import "@/assets/style/global.css";
export default {
  mounted() {
    this.loadData();
  },
  data() {
    return {
      noteCommentList: [],
      totalNum: 0,
      noteCommentListCopy: []
    };
  },
  methods: {
    loadData() {
      this.$axios
        .get("/api/users/getNoteDiscuss")
        .then(res => {
          this.noteCommentList = res.data.data;
          this.noteCommentListCopy =
            this.noteCommentList.length > 8
              ? this.noteCommentList.slice(0, 8)
              : this.noteCommentList;
          this.totalNum = res.data.data.length;
        })
        .catch(err => {
          console.log("笔记评论获取失败", err);
        });
    },
    goOther(id) {
      this.$router.push({ path: "/othercenter", query: { userId: id } });
    },
    goNote(id) {
      this.$router.push({ path: `/community/notelist/note/${id}` });
    },
    // 点击页数触发事件
    handleCurrentChange(currentPage) {
      this.noteCommentListCopy = this.noteCommentList.slice(
        (currentPage - 1) * 8,
        this.totalNum - 8 * (currentPage - 1) >= 8
          ? currentPage * 8
          : this.totalNum
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.card-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  li {
    width: 200px;
    margin: 0 20px 20px 0;
    box-shadow: 0 0 6px #000;
    border-radius: 10px;
    transition: all 0.5s;
    .card-img {
      width: 200px;
      height: 240px;
      background-image: url("../../../../../assets/毛血旺1.jpg");
      background-size: cover;
      border-radius: 10px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .card-foot {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 2px 15px;
      border: 1px solid #ccc;
      border-radius: 10px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      font-size: 14px;
      color: rgb(94, 91, 91);
      .card-foot-left {
        display: flex;
        align-items: center;
        .head-pic {
          width: 40px;
          height: 40px;
          background-image: url("../../../../../assets/油米姐姐.jpg");
          background-size: cover;
          border-radius: 50%;
          margin-right: 4px;
        }
      }
    }
  }
  li:nth-child(4n) {
    margin-right: 0;
  }
  li:hover {
    transform: translate(1%);
  }
}
</style>